Icons
The SGV icons
Import:
import Activity from '@comfortdelgro/compass-icons/react/activity'or with iconify
import {Icon} from '@iconify/react'
import activityIcon from '@comfortdelgro/compass-icons/iconify/activity'Filled Icons:
import AddressBookFilled from '@comfortdelgro/compass-icons/react/filled/address-book-filled'AddressBookFilled
ArrowDownFilled
ArrowLeftFilled
ArrowRightFilled
ArrowUpFilled
CalendarDaysFilled
ClockFilled
CreditCardFilled
DuplicateImageFilled
ExclamationFilled
GroupAddFilled
GroupSettingsFilled
HeartFilled
ImageFilled
InfoFilled
MailFilled
NotificationFilled
PencilFilled
PersonFilled
ProfileFilled
QuestionFilled
StarFilled
ThumbtackFilled
TrashFilled
UserAddFilled
WarningFilled
Outline Icons:
import AddressBookOutlined from '@comfortdelgro/compass-icons/react/outlined/address-book-outlined'AddressBookOutlined
ArrowDownOutlined
ArrowLeftOutlined
ArrowRightOutlined
ArrowUpOutlined
CalendarDaysOutlined
ClockOutlined
CreditCardOutlined
DuplicateImageOutlined
ExclamationOutlined
GroupAddOutlined
GroupSettingsOutlined
HeartOutlined
ImageOutlined
InfoOutlined
MailOutlined
NotificationOutlined
PencilOutlined
PersonOutlined
ProfileOutlined
QuestionOutlined
StarOutlined
ThumbtackOutlined
TrashOutlined
UserAddOutlined
UserGroupOutlined
WarningOutlined
Duotone Icons:
import BadgeDollarDuotone from '@comfortdelgro/compass-icons/react/duotone/badge-dollar-duotone'BadgeDollarDuotone
CalendarDaysDuotone
ChartLineUpDuotone
ChartPieDuotone
EditDuotone
FlagDuotone
GearsDuotone
GridDuotone
NotificationDuotone
OrgChartDuotone
PasswordDuotone
TrashDuotone
UserDuotone
Colorful Icons:
import Compass from '@comfortdelgro/compass-icons/react/colorful/compass'Clubhouse
Compass
Crown
Discord
Doctype
Dribbble
Facebook
Figma
Google
Linkedin
Pinterest
Reddit
Signal
Snapchat
Telegram
Tiktok
Tumblr
Twitter
WorkbenchText
Workbench
Youtube
ZigBizSquare
ZigBizTsm
ZigBizWhite
ZigBiz
Other Icons:
import Activity from '@comfortdelgro/compass-icons/react/activity'Activity
AlignCenter
AlignJustify
AlignLeft
AlignRight
Angellist
Apple
ArrowDown
ArrowLeft
ArrowRight
ArrowUp
Bid
Bold
Browser
Bug
Building
Bus2
BusAndCar
Bus
Calendar
Cancelled
Capacity
Car
CaretDown
CaretLeft
CaretRight
CaretUp
Chart
Chat
Cities
ClapperboardPlay
Classification
Clipboard
CloudUpload
Copy
CrossCircle
Cross
CustomerService
Dashboard
Deleted
Document
Download
Driver
Edit
Email
Excel
Export
EyeSlash
EyeSolid
FaceFrown
FaceLaugh
FaceMeh
FaceSadTear
FaceSmileHeart
FaceSmile
FacebookCircular
FacebookSquare
FileLaptop
FilePen
FileSignature
File
Fill
Filter
Flag
FolderOpen
Folder
FontColour
Font
Gauge
Gears
Github
Globe
Google
Grid
GripDots
H
H1
H2
H3
H4
H5
H6
HatWizard
Heading
HexagonXmark
Hide
Home
HourglassClock
InfoSquare
Inspect
Instagram
Invoice
Italic
Job2
Job
Key
Layers
LightbulbOn
Link
Linkedin
ListOl
ListUl
List
Logout
LowVolume
Maintenance
MapMarked
MapMarker
Map
Menu
MessageLines
Message
MinusSquare
Minus
MoneyBill
MoneyCheckAlt
Money
Mute
NotificationBadge
NotificationOff
Outdent
Paste
Pause
Pdf
PenNib
Phone
Pinterest
PlusSquare
Plus
ProfileCard
Profile
Project
QuestionSquare
QuoteLeft
QuoteRight
RatingStar0
RatingStar10
RatingStar100
RatingStar20
RatingStar30
RatingStar40
RatingStar50
RatingStar60
RatingStar70
RatingStar80
RatingStar90
Refresh
Reveal
School
Search
Settings
Shapes
Share
Shield2
Shield
Snapchat
Sort1To9Ascending
Sort1To9Descending
Sort9To1Ascending
Sort9To1Descending
Sort
Sparkle
Spreadsheet
Stamp
Status
Store
Strikethrough
Suitcase
TableColumns
Table
Tags
Taxi
TextHeight
ThumbDown
ThumbUp
TickCircle
Tick
Ticket
Timeline
Twitter
Underline
Unpin
Upload
UserTie
Users
Verified
Volume
Word
Youtube
ZoomIn
ZoomMinus
ZoomOut
ZoomPlus
Country Icons:
import FlagAbw from '@comfortdelgro/compass-icons/react/country/flag-abw'FlagAbw
FlagAfg
FlagAgo
FlagAia
FlagAla
FlagAlb
FlagAnd
FlagAre
FlagArg
FlagArm
FlagAsm
FlagAta
FlagAtg
FlagAus
FlagAut
FlagAze
FlagBdi
FlagBel
FlagBen
FlagBes
FlagBfa
FlagBgd
FlagBgr
FlagBhr
FlagBhs
FlagBih
FlagBlm
FlagBlr
FlagBlz
FlagBmu
FlagBol
FlagBra
FlagBrb
FlagBrn
FlagBtn
FlagBwa
FlagCaf
FlagCan
FlagCck
FlagChe
FlagChl
FlagChn
FlagCiv
FlagCmr
FlagCod
FlagCog
FlagCok
FlagCol
FlagCom
FlagCpv
FlagCri
FlagCub
FlagCuw
FlagCxr
FlagCym
FlagCyp
FlagCze
FlagDeu
FlagDji
FlagDma
FlagDnk
FlagDom
FlagDza
FlagEcu
FlagEgy
FlagEri
FlagEsh
FlagEsp
FlagEst
FlagEth
FlagFin
FlagFji
FlagFlk
FlagFra
FlagFro
FlagFsm
FlagGab
FlagGbr
FlagGeo
FlagGgy
FlagGha
FlagGib
FlagGin
FlagGlp
FlagGmb
FlagGnb
FlagGnq
FlagGrc
FlagGrd
FlagGrl
FlagGtm
FlagGuf
FlagGum
FlagGuy
FlagHkg
FlagHnd
FlagHrv
FlagHti
FlagHun
FlagIdn
FlagImn
FlagInd
FlagIot
FlagIrl
FlagIrn
FlagIrq
FlagIsl
FlagIsr
FlagIta
FlagJam
FlagJey
FlagJor
FlagJpn
FlagKaz
FlagKen
FlagKgz
FlagKhm
FlagKir
FlagKna
FlagKor
FlagKos
FlagKwt
FlagLao
FlagLbn
FlagLbr
FlagLby
FlagLca
FlagLie
FlagLka
FlagLso
FlagLtu
FlagLux
FlagLva
FlagMac
FlagMaf
FlagMar
FlagMco
FlagMda
FlagMdg
FlagMdv
FlagMex
FlagMhl
FlagMkd
FlagMli
FlagMlt
FlagMmr
FlagMne
FlagMng
FlagMnp
FlagMoz
FlagMrt
FlagMsr
FlagMtq
FlagMus
FlagMwi
FlagMys
FlagMyt
FlagNam
FlagNcl
FlagNer
FlagNfk
FlagNga
FlagNic
FlagNiu
FlagNld
FlagNor
FlagNpl
FlagNru
FlagNzl
FlagOmn
FlagPak
FlagPan
FlagPcn
FlagPer
FlagPhl
FlagPlw
FlagPng
FlagPol
FlagPri
FlagPrk
FlagPrt
FlagPry
FlagPse
FlagPyf
FlagQat
FlagReu
FlagRou
FlagRus
FlagRwa
FlagSau
FlagSdn
FlagSen
FlagSgp
FlagSgs
FlagShn
FlagSjm
FlagSlb
FlagSle
FlagSlv
FlagSmr
FlagSom
FlagSpm
FlagSrb
FlagSsd
FlagStp
FlagSur
FlagSvk
FlagSvn
FlagSwe
FlagSwz
FlagSxm
FlagSyc
FlagSyr
FlagTca
FlagTcd
FlagTgo
FlagTha
FlagTjk
FlagTkl
FlagTkm
FlagTls
FlagTon
FlagTto
FlagTun
FlagTur
FlagTuv
FlagTwn
FlagTza
FlagUga
FlagUkr
FlagUry
FlagUsa
FlagUzb
FlagVat
FlagVct
FlagVen
FlagVgb
FlagVir
FlagVnm
FlagVut
FlagWlf
FlagWsm
FlagYem
FlagZaf
FlagZmb
FlagZwe
File Icons:
import SVG from '@comfortdelgro/compass-icons/react/file/svg'AepGray
AepSolid
Aep
AiGray
AiSolid
Ai
AudioGray
AudioSolid
Audio
AviGray
AviSolid
Avi
CodeGray
CodeSolid
Code
CssGray
CssSolid
Css
CsvGray
CsvSolid
Csv
DmgGray
DmgSolid
Dmg
DocGray
DocSolid
Doc
DocumentGray
DocumentSolid
Document
DocxGray
DocxSolid
Docx
EmptyGray
EmptySolid
Empty
EspGray
EspSolid
Esp
ExeGray
ExeSolid
Exe
FigGray
FigSolid
Fig
FolderGray
FolderSolid
Folder
GifGray
GifSolid
Gif
HtmlGray
HtmlSolid
Html
ImageGray
ImageSolid
Image
ImgGray
ImgSolid
Img
InddGray
InddSolid
Indd
JavaGray
JavaSolid
Java
JpegGray
JpegSolid
Jpeg
JpgGray
JpgSolid
Jpg
JsGray
JsSolid
Js
JsonGray
JsonSolid
Json
MkvGray
MkvSolid
Mkv
Mp3Gray
Mp3Solid
Mp3
Mp4Gray
Mp4Solid
Mp4
MpegGray
MpegSolid
Mpeg
PdfGray
PdfSolid
Pdf
Pdf2Gray
Pdf2Solid
Pdf2
PngGray
PngSolid
Png
PsdGray
PsdSolid
Psd
PttGray
PttSolid
Ptt
PttxGray
PttxSolid
Pttx
RarGray
RarSolid
Rar
RssGray
RssSolid
Rss
SpreadsheetGray
SpreadsheetSolid
Spreadsheet
SqlGray
SqlSolid
Sql
SvgGray
SvgSolid
Svg
TiffGray
TiffSolid
Tiff
TxtGray
TxtSolid
Txt
Video01Gray
Video01Solid
Video01
Video02Gray
Video02Solid
Video02
WavGray
WavSolid
Wav
WebpGray
WebpSolid
Webp
XlsxGray
XlsxSolid
Xlsx
XmlGray
XmlSolid
Xml
ZipGray
ZipSolid
Zip
Usage:
<Activity width={20} height={20} color='red' />or with iconify
<Icon icon={activityIcon} width={20} height={20} />Props:
| Name | Type | Default | Description |
|---|---|---|---|
| color | string | — | Color of the icon |
| height | number | — | Height of the icon |
| width | number | — | Width of the icon |
| id | string | — | Unique ID of the icon |
| style | string | — | Style of the icon |
| className | CSS | — | Class name of the icon |
💡
Check out our ladle for more info on this component.